<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地图展示</title>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style type="text/css">
			#showMap_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			#container {
				height: 100%
			}
			/*.index_head {
				position: static;
			}*/
			
			#allmap {
				margin-top: 70px;
				width: 100%;
			}
			
			#showMap_input {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 98%;
				margin-left: 1% !important;
				position: fixed;
				top: 80px;
				z-index: 99;
				height: 45px;
				border: 1px solid #0C85DB;
				background-color: #FFFFFF;
				/*opacity: 0.8;*/
				border-radius: 5px;
			}
			
			#suggestId {
				padding-left: 10%;
				width: 100%;
				height: 100%;
				border: none;
				outline: medium;
				border-radius: 5px;
				color: #969696;
				font-size: 1.15em;
				font-weight: bold;
			}
			
			#searchBtn {
				display: block;
				float: left;
				position: absolute;
				width: 10%;
				color: #0C85DB;
				font-size: 1.6em;
				padding-top: 4px;
				text-align: center;
			}
			
			#delBtn {
				display: block;
				float: right;
				position: relative;
				top: -42px;
				width: 5%;
				text-align: right;
				font-size: 1.1em;
				line-height: 40px;
				margin-right: 3px;
			}
			
			.BMap_noprint {
				display: none;
			}
			
			.goHere {
				width: 70px;
				height: 70px;
				border-radius: 70px;
				margin-top: -35px;
				position: absolute;
				right: 8%;
				color: #FFFFFF;
				box-shadow: 0px 3px 2px #737373;
				text-align: center;
				font-weight: bold;
				/*background-color: #0070B4;*/
				FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0070B4, endColorStr=#78C4EC);
				/*IE*/
				background: -moz-linear-gradient(top, #0070B4, #78C4EC);
				/*火狐*/
				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0070B4), to(#78C4EC));
				/*谷歌*/
				background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #0070B4), color-stop(1, #78C4EC));
				/* Safari & Chrome*/
				filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0070B4', endColorstr='#78C4EC');
				/*IE6 & IE7*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0070B4', endColorstr='#78C4EC')";
				/* IE8 */
			}
			
			.goHere p {
				height: 0;
				margin-top: -15px;
			}
			
			.goHere img {
				position: relative;
				top: 15px;
			}
			/*底部提示框*/
			
			.foot_showMap {
				position: fixed;
				bottom: 0;
				height: 22%;
				box-shadow: 0px -3px 2px #999999;
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				/*background-color: #FFFFFF;*/
				background-image: url(img/show_map/bg_jingyue_bottom2.png);
				background-size: 100% 105%;
				background-repeat: no-repeat;
				/*display: none;*/
			}
			/*从火车站信息跳转过来时的底部段落样式*/
			
			.sta_h1_class {
				font-size: 1.3em;
				margin-top: 8px;
				margin-left: 15px;
				padding: 8px 0;
				color: #FFFFFF;
				border-bottom: 1px solid #DEDEDE;
			}
			
			.sta_h2_class {
				font-size: 1.05em;
				margin: 0px 15px;
				padding: 5px 0;
				color: #FFFFFF;
				
			}
			
			.sta_h3_class {
				text-align: center;
				padding-top: 3%;
			}
			/*从水运跳转过来的底部段落样式*/
			
			.boat_h2_class {
				font-size: 1.05em;
				margin: 0px 15px;
				padding: 5px 0;
				color: #FFFFFF;
			}
			
			.h2down3 {
				position: relative;
				top: 2px;
			}
			
			.sta_h3_class a {
				color: #F0F0F0;
			}
			/*底部加载loading提示*/
			
			#foot_showMap_loading {
				background-color: white;
				width: 10%;
				margin-left: 45%;
				margin-right: 45%;
				margin-top: 12%;
				border-radius: 100px;
			}
			
			#allmap {}
			
			#r-result {
				width: 100%;
				margin-top: 137px;
			}
			
			#r-result div {
				border: none !important;
			}
			
			#r-result div ol li {
				border-bottom: 1px dashed #DEDEDE;
			}
			
			#r-result div ol li span+a {
				display: none;
			}
			
			#r-result>div>div:last-child {
				display: none;
			}
			
			.BMap_bubble_title a{
				display: none;
			}
		</style>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>

	</head>

	<body ontouchstart>
		<div id="showMap_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="javascript:history.go(-1)" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">地图展示</p>
				</div>
			</div>
			<div id="allmap"></div>
			<div id="r-result" style="display: none;"></div>

			<div id="showMap_input">
				<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
				<input type="text" id="suggestId" size="20" placeholder="火车票代售点、餐饮、医疗、银行等" />
				<a id="delBtn" href="javascript:;" class="iconfont" style="display: none;">&#xe60b;</a>
			</div>
			<div class="foot_showMap" id="foot_showMap" style="display: none;">
				<!--<div id="goHereBtn" class="goHere">
					<p>
						<img src="img/show_map/gohereICON.png" /><br />到这去
					</p>
				</div>-->
				<img src="img/show_map/loading2color.gif" id="foot_showMap_loading" style="display: none;" />
				<div id="foot_showMap_msgH">
					<!--DOM添加至此-->
					<!--<h1>长春站 （长春市）</h1>
					<h2>地址： 吉林省长春市长白路5号</h2>
					<h3><a id="nearByBusBtn" class="iconfont" style="font-size: 20px;">&#xe709; 搜周边公交站点</a></h3>-->
				</div>
			</div>
		</div>
		<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var h = document.documentElement.clientHeight;
			var boatPoint;

			function getMapHeight() {
				var urlStr = "" + window.location;

				if(urlStr.indexOf("?sta=") != -1 || urlStr.indexOf("?boatP=") != -1) {
					var mapH = h - 70 - (h * 0.2);
				} else {
					var mapH = h - 70;
				}
				$("#allmap").height(mapH);
			}

			var map = new BMap.Map("allmap");
			//获取地图高度
			$(function() {
				getMapHeight();
				$("#foot_showMap_loading").show(); //显示信息正在加载
			});

			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}

			//			map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			//			var marker = new BMap.Marker(point); // 创建标注
			//			map.addOverlay(marker); // 将标注添加到地图中
			//			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

			$("#searchBtn").click(function() {
				//关键字检索
				var val = document.getElementById("suggestId");
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map,
						panel: "r-result"
					}
				});
				local.search($("#suggestId").val());
				//				$("#listBtn").click();
				//				setPlace();
			});

			//			$.ajax({
			//				type: "get",
			//				url: "http://api.map.baidu.com/place/v2/search",
			//				async: true
			//			});

			var ac = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});

			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if(e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

				value = "";
				if(e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
				setPlace();
			});

			function setPlace() {
				map.clearOverlays(); //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 17);
					map.addOverlay(new BMap.Marker(pp)); //添加标注
				}
				//				var local = new BMap.LocalSearch(map, { //智能搜索
				//					onSearchComplete: myFun
				//				});
				//				local.search(myValue);
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map,
						panel: "r-result"
					}
				});
				local.search(myValue);
				$("#allmap").hide();
				$("#r-result").show();
			}
			$("#suggestId").focus(function() {
				document.getElementById("delBtn").style.display = "block";
			});
			$("#delBtn").click(function() {
				document.getElementById("suggestId").value = "";
				$(this).hide();
			});
			//			$("#searchBtn").click(function(){
			//				
			//			});
			window.onload = function() {
				setTimeout(loading, 500);
			};
			var loading = function() {
				//利用DOM添加地图
				var urlStr = "" + window.location;
				if(urlStr.indexOf("?sta=") != -1) {
					//当本页是由火车站查询跳转至此时
					$("#foot_showMap").slideDown(400); //显示底部信息
					$("#foot_showMap_loading").show(); //显示信息正在加载
					var str = urlStr.split("?sta=")[1];
					str = str.split("&recid=");
					//					console.log(str);
					var strX = str[0].split("%20")[0];
					var strY = str[0].split("%20")[1];
					var R = str[1];
					//					console.log(R);
					map.clearOverlays(); //清除地图上所有覆盖物
					var staP = new BMap.Point(strX, strY); //地图加载时位于长春市中心点
//					console.log(staP);
					var staMk = new BMap.Marker(staP);
					map.addOverlay(staMk);
					map.centerAndZoom(staP, 15); // 初始化地图,设置中心点坐标和地图级别
					getStaNameAddress(R);
				} else if(urlStr.indexOf("?boatP=") != -1) {
					$("#foot_showMap_msgH").html("");
					var boatUrl = "" + window.location;
					boatUrl = decodeURI(boatUrl);
					var boatP = boatUrl.split("?boatP=")[1].split("&MSG=")[0];
					var msgStr = boatUrl.split("?boatP=")[1].split("&MSG=")[1];
					var type = msgStr.substring(0, 1);
					var msg = msgStr.substring(1);
					var line1 = msg.split(",")[0]; //底部信息第1行内容 水路设施名称
					var line2 = msg.split(",")[1]; //底部信息第2行 水路设施所属市州
					var line3 = boatType(type); //底部信息第3行内容 类型
					$("#foot_showMap").slideDown(400); //显示底部信息
					map.clearOverlays(); //清除地图上所有覆盖物
					boatPoint = new BMap.Point(boatP.split(",")[1], boatP.split(",")[0]); //new 一个新的点 并赋值给boatP
					//					console.log(boatPoint);
					var boatMk = new BMap.Marker(boatPoint);
					map.addOverlay(boatMk);
					map.centerAndZoom(boatPoint, 12); // 初始化地图,设置中心点坐标和地图级别
					var h1 = $('<h1 class="sta_h1_class">' + line1 + '</h1>'); //仍用火车站段落1样样式
					var h2 = $('<h2 class="boat_h2_class h2down3">' + line2 + '</h2>'); //水运段落2样式 第二段落下移2像素
					var h3 = $('<h3 class="boat_h2_class">' + line3 + '</h2>'); //仍用段落2样式 
					$("#foot_showMap_loading").hide(); //去除loading标志
					$("#foot_showMap_msgH").append(h1, h2, h3);

				} else {
					map.centerAndZoom(new BMap.Point(125.331505, 43.885007), 12);
					getGeocode();
				}

			};
			
			//获取位置
			//得到当前位置json字符串信息 及经纬度坐标 海拔 移动 移动速度的方法
			function geoInf(position) {
				var addressStr = position.addresses;
				var codns = position.coords; //获取地理坐标信息；
				var lat = codns.latitude; //获取到当前位置的纬度；
				x = lat;
				var longt = codns.longitude; //获取到当前位置的经度
				y = longt;
				console.log("安卓");
				src = new plus.maps.Point(Number(y), Number(x));
				var srcP = new BMap.Point(y, x);
				getBaiduPoint(srcP);

				//				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上,并调整地图视野
				//				myGeo.getPoint($("#suggestId_end").val(), function(point) {
				//					if(point) {
				//						map.centerAndZoom(point, 16);
				//						//console.log(point.lng + "，" + point.lat);
				//						//根据起终点坐标查询我的位置-我收藏的地点的线路规划
				//						var src = new plus.maps.Point(point.lng, point.lat);
				//						plus.maps.openSysMap(dst, $("#suggestId_end").val(), src);
				//					} else {
				//						$.alert("您选择的地址没有解析到结果，请重试", "提示");
				//					}
				//				}, "吉林省");
				//								alert(addressStr);
				//				$("#jbPlace").val(addressStr);
				//				console.log('------定位-----' + addressStr);

			}

			function getBaiduPoint(ggPoint) {
				var convertor = new BMap.Convertor();
				var pointArr = [];
				pointArr.push(ggPoint);
				convertor.translate(pointArr, 3, 5, translateCallback)
			}

			//			function getBaiduP_IOS(point) {
			//				var convertor = new BMap.Convertor();
			//				var pointArr = [];
			//				pointArr.push(ggPoint);
			//				convertor.translate(pointArr, 3, 5, translateCallback)
			//			}
			//安卓版转换
			translateCallback = function(data) {
				if(data.status === 0) {
					//dst = new plus.maps.Point(data.points[0].lng,data.points[0].lat);
					var pointY = data.points[0].lng;
					var pointX = data.points[0].lat;
					//判断设备是否为IOS
					var u = navigator.userAgent;
					var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
					var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
					if(isiOS == true) {
						//IOS系统
						//						console.log("Ios");
						src = new plus.maps.Point(Number(pointY), Number(pointX-0.0037));
						pointY = pointY + 0.0068;
						pointX = pointX + 0.0021;
						var startPstr = new BMap.Point(pointY, pointX);
					}

					var baiduPoint = new BMap.Point(pointY, pointX);
					var bdMarker = new BMap.Marker(baiduPoint);
					map.centerAndZoom(baiduPoint, 15);
					map.addOverlay(bdMarker);
//					var opts = {
//						title: "<a class='iconfont'>&#xe6c9;</a>您当前位置", // 信息窗口标题
//						enableMessage: true //设置允许信息窗发送短息
//						//							searchTypes: [BMAPLIB_TAB_TO_HERE]
//					}
//					var main = "输入目的地，可规划路线及导航";
//					var infoWindow = new BMap.InfoWindow(main, opts); // 创建信息窗口对象
//					bdMarker.setOffset(new BMap.Size(4, 22)); //改变提示文本位置
//					map.openInfoWindow(infoWindow, baiduPoint); //页面跳转至地图区域自动开启信息窗口
//					bdMarker.addEventListener("click", function() {
//						map.openInfoWindow(infoWindow, baiduPoint); //开启信息窗口
//					});
					//					}

				} else {
					$.alert("定位失败，请检查您是否打开了定位服务", "提示");
				}
			}

			// 通过定位模块获取位置信息
			function getGeocode() {
				plus.geolocation.getCurrentPosition(geoInf, {
					geocode: true
				});
			}
			

			//判断船舶页传来的信息为船舶停靠点、港口、码头、哪个类型
			function boatType(str) {
				if(str == "1") {
					str = "类型： 船舶停靠点";
				} else if(str == "2") {
					str = "类型： 港口";
				} else if(str == "3") {
					str = "类型： 码头";
				}
				return str;
			}

			//获取火车站名称&地址
			function getStaNameAddress(myRecid) {
				$.ajax({
					type: 'post',
					url: Url,
					async: false,
					cache: false,
					data: {
						type: "train_station_info",
						RECID: myRecid
					},
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$("#foot_showMap_loading").hide(); //去除loading标志
						if(data.MSG == "成功") {
							$("#foot_showMap_msgH").html("");
							var d = eval(data.DATA)[0];
							//							console.log(d);
							var name = d.STDNAME; //名称
							var address = d.ADDRESS; //地址
							//var park = d.PARKINGLOT //停车场
							var h1 = $('<h1 class="sta_h1_class">' + name + '</h1>');
							var h2 = $('<h2 class="sta_h2_class">' + address + '</h2>');
//							var h3 = $('<h3 class="sta_h3_class"><a id="nearByBusBtn" class="iconfont" style="font-size: 20px;">&#xe709; 搜周边公交站点</a></h3>');
							$("#foot_showMap_msgH").append(h1, h2);
						} else {
							//未获得数据
							$.alert("暂无结果", "提示", function() {
								window.location.href = "railway_station.html";
							});
						}

					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}

			//点击‘到这去’按钮
			$("#goHereBtn").click(function() {
				var url = "" + window.location;
				if(url.indexOf("?boatP=") > -1) {
					var titleDom = $(this).next().next().children()[0]; //获取地点名称节点
					var endStr_name = titleDom.innerHTML; //跳转出行规划后终点字符串前半段
					var endStr_address = titleDom.nextElementSibling.innerHTML.split("所属市州：  ")[1]; //跳转出行规划后终点字符串后半段
					var endStr = "?boatEndP=" + endStr_name + endStr_address; //跳转出行规划后终点字符串
					endStr = encodeURI(endStr);
					window.location.href = "cxgh.html" + endStr; //跳转至出行规划
				} else {
					//火车站提示框下的‘到这去’
					var nameStr = $("#foot_showMap_msgH h1").html();
					url = "?sta=" + url.split("?sta=")[1].split("&recid=")[0] + "&name=" + nameStr;
					//				console.log(url);
					url = encodeURI(url);
					window.location.href = "cxgh.html" + url; //跳转至出行规划
				}

			});

			//地图检索功能（区域检索，周边检索，城市内检索）

			$("#r-result").click(function() {
				$(this).hide();
				$("#allmap").show();
				map.setZoom(16);
			});
		</script>
	</body>

</html>